<template>
    <div class="modal" tabindex="-1" :style="`display: block;`">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ props.title }}</h5>
                    <button
                        type="button"
                        class="btn-close"
                        data-bs-dismiss="modal"
                        aria-label="Close"
                        @click="cancel()"
                    ></button>
                </div>
                <div class="modal-body">
                    <p>{{ props.msg }}</p>
                </div>
                <div class="modal-footer">
                    <button @click="cancel()" type="button" class="btn btn-secondary">确定</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    const emits = defineEmits(['close']);

    const cancel = () => emits('close');

    const props = defineProps({
        title: {
            type: String,
            default: 'title'
        },
        msg: {
            type: String,
            default: ''
        }
    });
</script>
